<template lang="html">
  <div class="about" v-loading="loading2" element-loading-text="加载中">
    <div v-if="shows">
      <h2>家庭信息显示</h2>
      <canvas id="myChart2" width="400px" height="400px"></canvas>

      <el-row >
          <el-col v-for="(item,index) in list" :label="item" :value="index" :key='index' :span="4">
            <el-tag>{{ item.infoname }}</el-tag>
            <el-switch
              v-model="smodel[item.infoino]"
              @change='changeStatus($event,item.infoino)'
              active-text="开"
              inactive-text="关"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-col>
      </el-row>
      <div  >
        
        
      </div>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js';
export default {
  name:"Info",
  data(){
    return {
      smodel:['s0','s1','s2','s3','s4','s5','s6','s7','s8','s9'],
      s0:true,s1: true,s2:false,s3: true,s4:true,s5: true,s6:false,s7: true,s8:false,s9: true,
      shows:true,
      loading2:false,
      list:[],
      datahs:[],
      datats:[],
      createTimes:[]
    }
  },
  methods:{
      getAllSensor(){
        this.$api.getAllSensorData()
              .then(({
                data: {
                  code,
                  data
                }
              }) => {
                  this.datats = data.datats
                  this.datahs = data.datahs
                  this.createTimes = data.createTimes
                  //console.log(this.datats,this.datahs,this.createTimes)
                  this.initChart()
                  return 
                }
              ).catch(err => {
                console.log(err)
              })
      },
      initChart(){
        var ctx2 = document.getElementById("myChart2");
        var myChart2 = new Chart(ctx2, {
            type: "line",
            data: {
                labels: this.createTimes,
                datasets: [
                    {
                        label: "温度",
                        backgroundColor: "rgba(225,10,10,0.3)",
                        borderColor: "rgba(225,103,110,1)",
                        borderWidth: 1,
                        pointStrokeColor: "#fff",
                        pointStyle: "crossRot",
                        data:this.datats,
                        cubicInterpolationMode: "monotone",
                        spanGaps: "false",
                        fill: "false"
                    },
                    {
                        label: "湿度",
                        backgroundColor: "rgba(10,255,255,255.3)",
                        borderColor: "rgba(10,255,255,255.3)",
                        borderWidth: 1,
                        pointStrokeColor: "#fff",
                        pointStyle: "crossRot",
                        data: this.datahs,
                        cubicInterpolationMode: "monotone",
                        spanGaps: "false",
                        fill: "false"
                    }
                ]
            },
            options: {
                
            }
         });
      }
      ,getLists(){
        this.loading2 = true;
        this.$api.getHInfo()
          .then((result) => {
            setTimeout(() => {
              this.loading2 = false
              this.list = result.data.lists
              .filter(item => item.infotype==1);
            }, this.$con.BACKLOADTIM)
          });
      },
      getSname(index){
        return "s" + index
      },
      control(cino,cstate){
        this.loading2 = true
        this.$api.sendControl({
                cino,cstate
              })
              .then(({
                data: {
                  code,
                  message
                }
              }) => {
                this.loading2 = false
                // 这里需要优化
                if (code == 200) {
                  this.$notify({
                    title: '发送成功',
                    message,
                    type: 'success'
                  })
                } else if (code == 401) {
                  this.$notify({
                    title: '失败',
                    message,
                    type: 'error'
                  })
                  
                  return false //阻止继续执行
                  // 需要优化
                }
              }).catch(err => {
                this.loading2 = false
                this.$notify({
                    title: '失败',
                    message,
                    type: 'error'
                  })
              })
          
      },
      changeStatus($event,num){
        var state = $event
        if(state){
          //sendCmd(num+'on')
          console.log('on'+'--'+num)
        }else{
          //sendCmd(num+'off')
          console.log('off'+'--'+num)
        }
        this.control(num,state)
        console.log($event)
        console.log(num)
      }
  },
  mounted(){
    
    this.getLists()
    this.getAllSensor()
  }
}
</script>

<style lang="css" scoped>
  .about{
    margin:auto;
  }

  .about a {
    color:#4078c0;
    display:inline-block;
    padding: 0.2rem 0.4rem;
    font-size: 1.6rem;
  }
  .about a:first-child{
    padding-left: 0;
  }
  .about p{
    font-size: 1.6rem;
    line-height: 1.6em;
  }

  .about a ,.about p,.about h2{
    margin: 1rem auto;
  }
  .about h2{
    font-weight: 400;
    font-size: 3rem;
    align-self: center;
    margin-top: 2rem;
  }
  @media screen and (max-width:480px){
    .about a,.about p{
      font-size: 1.4rem;
    }
    .about h2{
      margin-top: auto;
      font-size: 2.2rem;
    }
  }
</style>
